<template>
	<view class="">

		<view class="followContainer">
			<view class="followLogType">
				<text class="left" :decode="true"> 跟进方式: </text>
				<view class="right" @click="isShowType = true">
					{{ checkValue || "请选择跟进方式" }}
				</view>
				<image style="margin-left: 12rpx; width: 12rpx; height: 24rpx" src="@/static/image/icon_more.png"
					mode="">
				</image>
				<u-picker :show="isShowType" @confirm="onChangeCheckBox" @close="isShowType = false"
					@cancel="isShowType = false" :columns="curChexkBoxList" itemHeight="88">
				</u-picker>
			</view>
			<view class="followLogType" style="margin-top: 20rpx">
				<text class="left" :decode="true"> 下次跟进时间: </text>
				<view class="right" @click="selectFollowTime">
					{{ nextFollowTime || "点击选择" }}
				</view>
				<image style="margin-left: 12rpx; width: 12rpx; height: 24rpx" src="@/static/image/icon_more.png"
					mode="">
				</image>
			</view>

		</view>

		<view class="followContainer">


			<view class="followLogContent">
				<view>
					<textarea class="textArea" v-model="inputText" placeholder="请输入内容" />
				</view>
			</view>

			<view>
				<view class="imgContainer">
					<template v-for="(item, index) in imgList">
						<view class="imageWrapper" :key="index">
							<image :src="item" class="img" mode=""> </image>
							<image @click="onDeleteImg(index)" class="tag" src="../static/image/ds_icon_del.png"
								mode="">
							</image>
						</view>
					</template>
					<view v-if="imgList.length < 9" class="addContainer" @click="addImage">
						<image src="../static/image/article_edit_cover_icon_add.png" class="icon" mode=""></image>
						上传图片
					</view>
				</view>
			</view>
		</view>

		<view class="" style="height: 200rpx"> </view>
		<view class="bottomContainer">
			<view class="container" @click="addFollowLog"> 保存 </view>
		</view>
		<u-calendar :show="nextFollowTimeVisible" :mode="'single'" :min-date="minFollowTime" :max-date="maxFollowTime"
			:closeOnClickOverlay="true" @close="nextFollowTimeVisible = false"
			@confirm="changeNextFollowTime"></u-calendar>
	</view>
</template>
a
<script>
	import {
		mapState
	} from "vuex";
	import moment from "moment";
	const App = getApp();
	const api = require("@/static/js/api.js");
	const utils = require("@/static/js/utils.js");
	let that = null;
	export default {
		data() {
			return {
				nextFollowTime: "",
				nextFollowTimeVisible: false,
				minFollowTime: "",
				maxFollowTime: "",
				inputText: "",
				customerId: "",
				checkValue: "",
				imgList: [],
				isShowType: false,
				curChexkBoxList: [
					[
						"普通跟进",
						"来电跟进",
						"去电跟进",
						"微信跟进",
						"到访跟进",
						"复访跟进",
					],
				],
			};
		},
		computed: {
			...mapState({
				shopInfo: (state) => state.userInfo.shopInfo,
			}),
		},
		onLoad(options) {
			that = this;
			if (options.id) {
				that.customerId = options.id;
			}
		},
		onShow() {
			that = this;
			that.minFollowTime = this.getDay(0);
			that.maxFollowTime = this.getDay(that.shopInfo.limitFollowDay||30);
		},
		onUnload() {},
		onHide() {},
		onReachBottom() {},
		methods: {
			changeNextFollowTime(e) {
				console.log("changeNextFollowTime", e);
				if (e && e.length == 1) {
					that.nextFollowTime = e[0];
				}

				that.nextFollowTimeVisible = false;
			},
			selectFollowTime() {
				this.nextFollowTimeVisible = true;
			},
			getDay(val) {
				let now = new Date();
				let target;
				target = new Date(now.getTime() + val * (24 * 60 * 60 * 1000));
				return moment(target).format("YYYY-MM-DD");
			},
			addImage() {
				uni.chooseImage({
					count: 9 - that.imgList.length,
					sourceType: ["album"],
					success: (res) => {
						// var path = res.tempFilePaths;
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.imgList.push(res.tempFilePaths[i]);
						}
					},
				});
			},
			onChangeCheckBox(value) {
				console.log(value);
				this.checkValue = value.value[0];
				this.isShowType = false;
			},

			onDeleteImg(index) {
				that.imgList.splice(index, 1);
			},
			checkParam() {
				// if (!that.nextFollowTime) {
				// 	uni.showToast({
				// 		title: "请选择下次跟进时间",
				// 		icon: "none",
				// 		duration: 3000,
				// 	});
				// 	return false;
				// }

				if (!that.inputText) {
					uni.showToast({
						title: "请输入跟进内容",
						icon: "none",
						duration: 3000,
					});
					return false;
				}

				if (!that.checkValue) {
					uni.showToast({
						title: "请选择跟进类型",
						icon: "none",
						duration: 3000,
					});
					return false;
				}
				// if (that.imgList&&that.imgList.length>0){
				// 	uni.showToast({
				// 		title: "请选择图片",
				// 		icon: "none",
				// 		duration: 3000,
				// 	});
				// 	return false;
				// }
				return true

			},


			addFollowLog() {
				let that = this;
				if (this.checkParam()){
					if (that.imgList&&that.imgList.length>0){
						api.uploadFollowLogImage({
							files: that.imgList,
							param: {},
						}).then((res) => {
							console.log(res);
							if (res.success) {
								that.sendAddFollowLog(res.files)
							}
						});
					}else{			
						that.sendAddFollowLog([])
					}	
				}
					
			},
			
			sendAddFollowLog(list){
				var fileIds = [];
				for (var i = 0; i < list.length; i++) {
					fileIds.push(list[i].fileId);
				}
				api.addFollowLog({
					param: {
						fileIds: fileIds,
						customerId: that.customerId,
						content: that.inputText,
						type: that.checkValue,
						nextFollowTime: that.nextFollowTime,
					}
				}).then((res) => {
					console.log(res);
					if (res.success) {
						uni.navigateBack({});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000,
						});
					}
				});
			}
			
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.followContainer {
		width: 714rpx;
		margin-left: 18rpx;
		background: #ffffff;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #eeeeee;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.followLogType {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1px solid #f3f3f3;

		.left {
			width: 200rpx;
			font-size: 30rpx;
			color: #000;
			line-height: 42rpx;
			margin-right: 20rpx;
			text-align: end;
		}

		.right {
			width: 400rpx;
			height: 40rpx;
			padding: 0 20rpx;
			line-height: 40rpx;
			color: #888;
			font-size: 28rpx;
		}
	}

	.followLogContent {
		display: flex;
		align-items: center;

		.textArea {
			width: 654rpx;
			min-height: 256rpx;
			background: #ffffff;
			// box-shadow: 2rpx 2rpx 8rpx 4rpx #eeeeee;
			// border-radius: 20rpx;
			// padding: 30rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
		}
	}

	.imgContainer {
		width: 654rpx;
		background: #ffffff;
		// box-shadow: 2rpx 2rpx 8rpx 4rpx #eeeeee;
		border-radius: 20rpx;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: wrap;
		// padding: 30rpx 30rpx 6rpx 30rpx;

		.imageWrapper {
			position: relative;

			.img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				margin-right: 35rpx;
				margin-bottom: 24rpx;
			}

			.tag {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: -15rpx;
				right: 15rpx;
			}
		}

		.addContainer {
			width: 180rpx;
			height: 180rpx;
			background: #f2f3f5;
			border-radius: 20rpx;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 24rpx;
			color: #666666;
			line-height: 33rpx;

			.icon {
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.bottomContainer {
		width: 750rpx;
		height: 150rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;

		.container {
			width: 600rpx;
			height: 80rpx;
			background: #5e9ffd;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #ffffff;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>